import React, { forwardRef, useEffect, useState } from 'react'
import { Form, Input, Select, } from 'antd'
const {Option} = Select
const UserForm = forwardRef((props, ref) => {
    const [isDisabled, setisDisabled] = useState(false)
    
    useEffect(() => {
        setisDisabled(props.isUpdateDisabled)
        // console.log(props.regionList);
    }, [props.isUpdateDisabled]
    )

    const { roleId ,region} = JSON.parse(localStorage.getItem('token'))
    const roleObj = {
        '1': 'superadmin',
        '2': 'admin',
        '3': 'editor'
    }
    //区域校验
    const checkRegionDisable = (item) => {
        // console.log(item ,region);
        //更新时候的select禁用
        if (props.isUpdate) {
            if (roleObj[roleId] === 'superadmin') {
                return false
            } else {
                return  true
            }
        }else{
            //创建时的select 禁用
            if (roleObj[roleId] === 'superadmin') {
                return false
            } else {
                return item.value!==region
            }
        }
    }


   //角色校验
    const checkRoleDisabled = (item) => {
        // console.log(item ,region);
        //更新时候的select禁用
        if (props.isUpdate) {
            if (roleObj[roleId] === 'superadmin') {
                return false
            } else {
                return  true
            }
        }else{
            //创建时的select 禁用
            if (roleObj[roleId] === 'superadmin') {
                return false
            } else {
                return roleObj[item.id]!=='editor'
            }
        }
    }
    return (
        <Form
            ref={ref}

            layout="vertical"
        >
            <Form.Item
                name="username"
                label="用户名"
                rules={[
                    {
                        required: true,
                        message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                name="password"
                label="密码"
                rules={[
                    {
                        required: true,
                        message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Input />
            </Form.Item>
            <Form.Item
                name="region"
                label="区域"

                rules={isDisabled ? [] : [
                    {
                        required: true,
                        message: 'Please input the title of collection!',
                    },
                ]}

            >

                <Select
                    disabled={isDisabled}
                    style={{

                    }}
                    // options={
                    //     props.regionList
                    // }

                // defaultValue="欧洲"
                >{   
                    props.regionList.map(item=>
                        <Option value={item.value} key={item.id} disabled={checkRegionDisable(item)}>{item.title}</Option>
                        )
                }
                </Select>
            </Form.Item>


            <Form.Item
                name="roleId"
                label="角色"
                rules={[
                    {
                        required: true,
                        message: 'Please input the title of collection!',
                    },
                ]}
            >
                <Select

                    onChange={(value) => {
                        console.log(value);
                        if (value === 1) {
                            setisDisabled(true)
                            ref.current.setFieldsValue({
                                region: ''
                            })
                        } else {
                            setisDisabled(false)
                        }
                    }}

                    style={{

                    }}
                    // options={
                    //     props.roleList
                    // }
                >
                    {
                        props.roleList.map(item=>
                            <Option value={item.id} key={item.id} disabled={checkRoleDisabled(item)}>{item.label}</Option>)
                    }
                </Select>
            </Form.Item>
        </Form>
    )
})
export default UserForm